<html>
<head>
	<!--MOCHAUI-->
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-core-nocompat-yc.js"></script>
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-more-yc.js"></script>
	<script type="text/javascript" src="../../Core/core.js"></script>
	<script type="text/javascript" src="../../Core/desktop.js"></script>
	<script type="text/javascript" src="../column/column.js"></script>
	<script type="text/javascript" src="../panel/panel.js"></script>
	<script type="text/javascript" src="../taskbar/taskbar.js"></script>
	<script type="text/javascript" src="../window/window.js"></script>
	<script type="text/javascript" src="../window/modal.js"></script>
	<!--MOCHAUI-->
	<script type="text/javascript" src="tree.js"></script>
	<script type="text/javascript">
		var nodes = [
			{value:'item1',text:"Item 1",isChecked: false,isSelected: false,nodes:[
				{value:'item4',text:"Item 4",isChecked: true,isSelected: true},
				{value:'item5',text:"Item 5",isChecked: false,isSelected: false},
				{value:'item6',text:"Item 6",isChecked: false,isSelected: false}
			]},
			{value:'item2',text:"Item 2",isChecked: true,isSelected: false,nodes:[
				{value:'item7',text:"Item 7",isChecked: false,isSelected: false},
				{value:'item8',text:"Item 8",isChecked: false,isSelected: false},
				{value:'item9',text:"Item 9",isChecked: false,isSelected: false}
			]},
			{value:'item3',text:"Item 3",isChecked: false,isSelected: false,nodes:[
				{value:'item10',text:"Item 10",isChecked: false,isSelected: false}
			]},
			{value:'item11',text:"Item 11",isChecked: false,isSelected: false}
		];

		new MUI.Tree({
			container:'page',
			width:250,
			height:100,
			id:'tree1',
			nodes:nodes,
			onNodeExpanded: function(node, isExpanded, self, e) {
				alert('receieved onNodeExpanded command on node ' + node.value + ', isExpanded=' + isExpanded)
			},
			onNodeChecked: function(node, checked, self, e) {
				alert('receieved onNodeChecked command on node ' + node.value + ', checked=' + checked);
			},
			onNodeSelected: function(node, self, e) {
				alert('receieved onNodeSelected command on node ' + node.value)
			}
		});

		new MUI.Tree({
			container:'page2',
			width:250,
			height:100,
			id:'tree2',
			nodes:nodes,
			showCheckBox: true,
			canSelect: false,
			onNodeExpanded: function(node, isExpanded, self, e) {
				alert('receieved onNodeExpanded command on node ' + node.value + ', isExpanded=' + isExpanded)
			},
			onNodeChecked: function(node, checked, self, e) {
				alert('receieved onNodeChecked command on node ' + node.value + ', checked=' + checked);
			},
			onNodeSelected: function(node, self, e) {
				alert('receieved onNodeSelected command on node ' + node.value)
			}
		});
	</script>
	<link rel="stylesheet" type="text/css" href="../../Themes/default/css/tree.css"/>

</head>

<body>

<div id="page">
</div>
<br/><br/>

<div id="page2">
</div>

</body>
</html>